<script setup>
// import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <div class="dashboard-container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <h2>管理后台</h2>
      <nav>
        <ul>
          <li>
            <router-link to="/dashboard/home" active-class="active">
              系统首页
            </router-link>
          </li>
          <li>
            <router-link to="/dashboard/movie" active-class="active">
              电影管理
            </router-link>
          </li>
          <li>
            <router-link to="/dashboard/reviemanage" active-class="active">
              影评管理
            </router-link>
            <tp @=""></tp>
          </li>
          <!-- 可以继续添加其他导航链接 -->
        </ul>
      </nav>
    </aside>

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 子路由组件将在这里渲染 -->
        <router-view></router-view>
    </main>
  </div>
</template>



<style scoped>
.dashboard-container {
  display: flex;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #f0f0f0;
  padding: 20px;
  border-right: 1px solid #ddd;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
}

.sidebar a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 8px;
  border-radius: 4px;
}

.sidebar a.active {
  background-color: #007bff;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #e9ecef;
}

.main-content {
  flex: 1;
  padding: 20px;
}
</style>